<template>
  <div class="app-container" style="height: 100%;overflow: hidden;">
    <el-row :gutter="20" style="height: 100%;">
      <!--部门数据-->
      <el-col :span="4" :xs="24" style="height:100%;">
        <div class="head-container">
          <el-input v-model="deptName" placeholder="请输入产品" clearable size="small" prefix-icon="el-icon-search"
            style="margin-bottom: 20px" />
        </div>
        <div class="head-container" style="height:90%; overflow: auto;">
          <el-tree ref="tree" :data="deptOptions" :props="defaultProps" :expand-on-click-node="false"
            :filter-node-method="filterNode" node-key="id" :default-expanded-keys="['1']" :default-expand-all="false"
            highlight-current @node-click="handleNodeClick">
            <span class="custom-tree-node" slot-scope="{ node,data }">
              <span>
                ( {{data.code}})
              </span>
              <span>{{ node.label }}</span>

            </span>
          </el-tree>
        </div>
      </el-col>
      <!--用户数据-->
      <el-col :span="20" :xs="24" style="height:100%; overflow: auto;">
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch"
          label-width="68px">
          <el-form-item label="存货编码" prop="code">
            <el-input v-model="queryParams.code" placeholder="请输入存货编码" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="产品名称" prop="deptName">
            <el-input v-model="queryParams.deptName" placeholder="请输入产品名称" clearable
              @keyup.enter.native="handleQuery" />
          </el-form-item>
          <el-form-item label="产品型号" prop="phone">
            <el-input v-model="queryParams.phone" placeholder="请输入产品型号" clearable @keyup.enter.native="handleQuery" />
          </el-form-item>
          <!--<el-form-item label="产品型号明细" prop="email">
            <el-input v-model="queryParams.email" placeholder="请输入产品型号明细"
                      clearable @keyup.enter.native="handleQuery" style="width: 130px"/>
          </el-form-item>-->
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <!--<el-row :gutter="10" class="mb8">
         <el-col :span="1.5">
           <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd"
                      v-hasPermi="['system:user:add']">新增
           </el-button>
         </el-col>
        <el-col :span="1.5">
           <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple"
                      @click="handleDelete" v-hasPermi="['system:user:remove']">删除
           </el-button>
         </el-col>
         <el-col :span="1.5">
           <el-button type="info" plain icon="el-icon-upload2" size="mini"
                      @click="handleImport" v-hasPermi="['system:user:import']">导入
           </el-button>
         </el-col>
         <el-col :span="1.5">
           <el-button type="warning" plain icon="el-icon-download" size="mini"
                      @click="handleExport" v-hasPermi="['system:user:export']">导出
           </el-button>
         </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="getList" :columns="columns"></right-toolbar>
        </el-row>-->

        <el-table border v-loading="loading" :data="userList" border stripe>
         <!-- <el-table-column type="selection" width="50" align="center"/>-->
          <el-table-column label="存货编码" align="center" key="code" prop="code" v-if="columns[0].visible"  />
          <el-table-column label="产品名称" align="center" key="deptName" prop="deptName" v-if="columns[1].visible"
            :show-overflow-tooltip="true"  />
          <el-table-column label="产品型号" align="center" key="phone" prop="phone" v-if="columns[2].visible"
            :show-overflow-tooltip="true"  />
          <!--<el-table-column label="产品型号明细" align="center" key="email" prop="email" v-if="columns[3].visible"
                           :show-overflow-tooltip="true"/>-->
          <el-table-column label="计量单位" align="center" key="dealtype" prop="dealtype" v-if="columns[4].visible"
            :show-overflow-tooltip="true"  />
          <el-table-column label="存货数量" align="center" key="counts" prop="counts" v-if="columns[5].visible" width="120"
             />
          <!--<el-table-column label="冻结数量" align="center" key="counts" prop="counts" v-if="columns[5].visible"
                           width="120"/>-->
          <!--<el-table-column label="冻结数量" align="center" key="dongjie" prop="dongjie" v-if="columns[6].visible"
                           width="120"/>-->
          <el-table-column label="剩余数量" align="center" key="shengyu" prop="shengyu" v-if="columns[6].visible"
            width="120"  />
          <el-table-column label="总重量" align="center" key="alldun" prop="alldun" v-if="columns[7].visible" width="120"
             />
          <!--<el-table-column label="剩余重量" align="center" key="shengdun" prop="shengdun" v-if="columns[8].visible"
                           width="120"/>-->
          <el-table-column label="总价格" align="center" key="taxprice" prop="taxprice" v-if="columns[8].visible"
            width="120"  />
          <el-table-column label="剩余总价" align="center" key="allmaoney" prop="allmaoney" v-if="columns[9].visible"
            width="120"  />
          <!-- <el-table-column label="状态" align="center" key="status" v-if="columns[5].visible">
             <template slot-scope="scope">
               <el-switch
                 v-model="scope.row.status"
                 active-value="0"
                 inactive-value="1"
                 @change="handleStatusChange(scope.row)"
               ></el-switch>
             </template>
           </el-table-column>-->
          <el-table-column label="操作" align="center" width="160" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" icon="el-icon-add" @click="handleAdd(scope.row)">新增
              </el-button>
              <!-- <el-button
                 size="mini"
                 type="text"
                 icon="el-icon-edit"
                 @click="handleUpdate(scope.row)"
               >修改
               </el-button>-->
              <!--<el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="handleDelete(scope.row)"
              >删除
              </el-button>-->
              <el-button size="mini" type="text" icon="el-icon-view" @click="handleShowOrder(scope.row)">产品明细
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" />
      </el-col>
    </el-row>

    <!-- 添加或修改用户配置对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="60%" :close-on-click-modal="false" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="存货编码" prop="code">
              <el-input v-model="form.code" placeholder="请输入存货编码" maxlength="30" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品分类" prop="deptId">
              <treeselect v-model="form.deptId" :options="deptOptions" placeholder="请选择产品分类" style="width:240px;" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="供应商" prop="supplierId">
              <el-select v-model="form.supplierId" placeholder="请选择供应商" filterable @change="selectSupplier" clearable
                style="width: 300px">
                <el-option v-for="dict in dict.type.goods_supplier" ref="myselectSsupplier" :key="dict.value"
                  :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户名称" prop="customerId">
              <el-select v-model="form.customerId" placeholder="请选择客户" filterable @change="selectCustomer" clearable
                style="width: 300px">
                <el-option v-for="dict in dict.type.goods_customer" ref="myselectCustomer" :key="dict.value"
                  :label="dict.label" :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="产品名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入产品名称" maxlength="200" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产品型号" prop="model">
              <el-input v-model="form.model" placeholder="请输入产品型号" maxlength="200" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <!--<el-col :span="12">
            <el-form-item label="型号明细" prop="email">
              <el-input v-model="form.email" placeholder="请输入产品型号明细" maxlength="200"/>
            </el-form-item>
          </el-col>-->
          <el-col :span="12">
            <el-form-item label="计量单位" prop="unit">
              <el-input v-model="form.unit" placeholder="请输入计量单位" maxlength="30" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="单价" prop="costPriceTax">
              <el-input-number v-model="form.costPriceTax" placeholder="请输入单价" maxlength="30"
                @change="updateTotleCost()" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="数量" prop="count">
              <el-input-number v-model="form.count" placeholder="请输入数量" maxlength="30" @change="updateTotleCost()" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="重量" prop="dun">
              <el-input-number v-model="form.dun" placeholder="请输入重量" maxlength="30" @change="updateDun()" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="含税总价" prop="costTax">
              <el-input-number v-model="form.costTax" placeholder="请输入含税总价" maxlength="30" @change="updateDun()" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="产品类型" prop="type">
              <el-select v-model="form.type" placeholder="请选择产品类型">
                <el-option v-for="dict in dict.type.goods_type" :key="dict.value" :label="dict.label"
                  :value="dict.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <!-- <GoodsOrderin-form @ok="getList" ref="GoodsSaleListFormList"></GoodsOrderin-form>-->

    <GoodsOrderInList-form @ok="getList" ref="goodsrOrderInListForm"></GoodsOrderInList-form>
  </div>
</template>

<script>
  import {
    listGoodsOrderIn,
    addGoodsOrderIn,
    updateGoodsOrderIn,
    delGoodsOrderIn,
    goodsOrderIn
  } from "@/api/sysArea/area";
  import {
    getToken
  } from "@/utils/auth";
  import {
    listByLazyTree,
    listAreaByLazyTree,
    listAreabyParetnt,
    listByLazyTreePart
  } from "@/api/sysArea/area";
  //   import GoodsSaleListFormInfo from '@/views/develop/goodsSale/module/GoodsSaleListFormInfo'
  import GoodsOrderInListForm from '@/views/develop/goodsOrderIn/module/GoodsOrderInListForm'
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";

  export default {
    name: "InventoryArea",
    dicts: ['goods_supplier', 'goods_customer', 'goods_type'],
    components: {
      Treeselect,
      GoodsOrderInListForm
    },
    data() {
      return {
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 用户表格数据
        userList: null,
        // 弹出层标题
        title: "",
        // 部门树选项
        deptOptions: [],
        // 是否显示弹出层
        open: false,
        // 部门名称
        deptName: undefined,
        // 默认密码
        initPassword: undefined,
        // 日期范围
        dateRange: [],
        // 岗位选项
        postOptions: [],
        // 角色选项
        roleOptions: [],
        // 表单参数
        deptIdIn: undefined,
        deptNameIn: undefined,
        mainIdIn: undefined,
        form: {},
        defaultProps: {
          children: "children",
          label: "label"
        },
        // 用户导入参数
        upload: {
          // 是否显示弹出层（用户导入）
          open: false,
          // 弹出层标题（用户导入）
          title: "",
          // 是否禁用上传
          isUploading: false,
          // 是否更新已经存在的用户数据
          updateSupport: 0,
          // 设置上传的请求头部
          headers: {
            Authorization: "Bearer " + getToken()
          },
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/system/user/importData"
        },
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 20,
          userName: undefined,
          status: undefined,
          mainId: undefined,
          deptId: undefined,
          code: undefined,
          name: undefined,
          model: undefined,
          brand: undefined,
          ancestors: undefined,
          phone: undefined,
          email: undefined,
          deptName: undefined,
        },
        // 列信息
        columns: [{
            key: 0,
            label: `存货编码`,
            visible: true
          },
          {
            key: 1,
            label: `产品名称`,
            visible: true
          },
          {
            key: 2,
            label: `产品型号`,
            visible: true
          },
          {
            key: 3,
            label: `产品型号明细`,
            visible: true
          },
          {
            key: 4,
            label: `计量单位`,
            visible: true
          },
          {
            key: 5,
            label: `存货数量`,
            visible: true
          },
          /*  {key: 6, label: `冻结数量`, visible: true},*/
          {
            key: 6,
            label: `剩余数量`,
            visible: true
          },
          {
            key: 7,
            label: `总重量`,
            visible: true
          },
          /*{key: 8, label: `剩余重量`, visible: true},*/
          {
            key: 8,
            label: `总价格`,
            visible: true
          },
          {
            key: 9,
            label: `剩余总价`,
            visible: true
          },
        ],
        // 表单校验
        rules: {
          code: [{
              required: true,
              message: "产品编码不能为空",
              trigger: "blur"
            },
            {
              min: 2,
              max: 50,
              message: '用户名称长度必须介于 2 和 50 之间',
              trigger: 'blur'
            }
          ],
          name: [{
            required: true,
            message: "产品名称不能为空",
            trigger: "blur"
          }],
          deptId: [{
            required: true,
            message: "产品分类不能为空",
            trigger: "blur"
          }],
          phone: [{
            required: true,
            message: "产品型号不能为空",
            trigger: "blur"
          }],
          count: [{
            required: true,
            message: "数量不能为空",
            trigger: "blur"
          }],
          type: [{
            required: true,
            message: "请选择产品类型",
            trigger: "blur"
          }],
        }
      };
    },
    watch: {
      // 根据名称筛选部门树
      deptName(val) {
        this.$refs.tree.filter(val);
      }
    },
    created() {
      this.getList();
      this.getTreeselect();
    },
    methods: {

      updateTotleCost() {
        let that = this;
        if (that.form.count && that.form.costPriceTax) {
          let totleCost = that.functionNumberMul(that.form.count, that.form.costPriceTax);
          that.$set(that.form, "costTax", totleCost);
        }
        // that.updateCostTax();
      },
      functionNumberMul(arg1, arg2) {
        var m = 0;
        var s1 = arg1.toString();
        var s2 = arg2.toString();
        try {
          m += s1.split(".")[1].length;
        } catch (e) {}
        try {
          m += s2.split(".")[1].length;
        } catch (e) {}
        let c1 = Number(s1.replace(".", ""));
        let c2 = Number(s2.replace(".", ""));
        let c3 = Math.pow(10, m);
        return c1 * c2 / c3;
      },
      updateDun() {
        let that = this;
        if (that.form.dun && that.form.costTax) {
          let totleCost = that.functionCostPriceTax(that.form.costTax, that.form.dun);
          that.$set(that.form, "costPriceTax", totleCost);
        }
      },
      functionCostPriceTax(arg1, arg2) {
        return Math.round(arg1 / arg2 * 100) / 100;
      },
      selectCustomer(value) {
        let that = this;
        that.$nextTick(() => {
          let arr = that.$refs.myselectCustomer;
          for (let i = 0; i < arr.length; i++) {
            if (arr[i].currentValue == value) {
              that.form.customerName = arr[i].label;
            }
          }
        })
      },
      selectSupplier(value) {
        let that = this;
        that.$nextTick(() => {
          let arr = that.$refs.myselectSsupplier;
          for (let i = 0; i < arr.length; i++) {
            if (arr[i].currentValue == value) {
              that.form.supplierName = arr[i].label;
            }
          }
        })
        // console.log(that.form.buyName);
      },
      handleShow(row) {
        this.$refs.GoodsSaleListFormList.showSaleRecordForOrder(row);
      },
      handleShowOrder(row) {
        this.$refs.goodsrOrderInListForm.showrOrderIn(row);
      },
      /** 查询用户列表 */
      getList() {
        this.loading = true;
        listByLazyTreePart(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
          this.userList = response.rows;
          //this.userList = response.data;
          this.total = response.total;
          this.loading = false;
        });
      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
        //listAreaByLazyTree({parentId:3503}).then(response => {
        listByLazyTree().then(response => {
          this.deptOptions = response.data;
        });
      },
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      // 节点单击事件
      handleNodeClick(data) {
        this.queryParams.ancestors = data.id;
        //this.queryParams.deptId = data.id;
        //this.queryParams.deptName = data.label;
        this.handleQuery();
      },
      // 用户状态修改
      handleStatusChange(row) {
        let text = row.status === "0" ? "启用" : "停用";
        this.$modal.confirm('确认要"' + text + '""' + row.userName + '"用户吗？').then(function() {
          return changeUserStatus(row.userId, row.status);
        }).then(() => {
          this.$modal.msgSuccess(text + "成功");
        }).catch(function() {
          row.status = row.status === "0" ? "1" : "0";
        });
      },
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          code: undefined,
          deptName: undefined,
          phone: undefined,
          counts: undefined,
          deptId: undefined,
          email: undefined,
          sex: undefined,
          status: "0",
          type: undefined,
          remark: undefined,
          dealtype: undefined,
          model: undefined,
          postIds: [],
          roleIds: []
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.dateRange = [];
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      /* handleSelectionChange(selection) {
           this.ids = selection.map(item => item.userId);
           this.single = selection.length != 1;
           this.multiple = !selection.length;
       },*/
      // 更多操作触发
      handleCommand(command, row) {
        switch (command) {
          case "handleResetPwd":
            this.handleResetPwd(row);
            break;
          case "handleAuthRole":
            this.handleAuthRole(row);
            break;
          default:
            break;
        }
      },
      /** 新增按钮操作 */
      handleAdd(row) {
        this.reset();
        this.open = true;
        this.form.code = row.code;
        this.form.name = row.deptName;
        this.form.mainId = row.deptId;
        this.form.deptId = row.deptId;
        this.form.deptName = row.deptName;
        this.form.email = row.email; //明细
        this.form.model = row.phone; //型号
        this.form.unit = row.dealtype;
        this.title = "添加产品";
        /*this.reset();
        this.getTreeselect();
        getUser().then(response => {
            //this.form.password = this.initPassword;

        });*/
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        this.form = row;
        this.openUpdate = true;
        this.title = "修改产品";
        /* this.reset();
         this.getTreeselect();
         const userId = row.userId || this.ids;
         getUser(userId).then(response => {
             this.form = response.data;
             this.open = true;
             this.title = "修改用户";
         });*/
      },
      /** 重置密码按钮操作 */
      handleResetPwd(row) {
        this.$prompt('请输入"' + row.userName + '"的新密码', "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          closeOnClickModal: false,
          inputPattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[~!@#$%^&*()_+`\-={}:";'<>?,./]).{8,20}$/,
          inputErrorMessage: "用户密码不能为空,密码由8-20位数字、大小写字母和特殊符号组成!",
        }).then(({
          value
        }) => {
          resetUserPwd(row.userId, value).then(response => {
            this.$modal.msgSuccess("修改成功，新密码是：" + value);
          });
        }).catch(() => {});
      },
      /** 分配角色操作 */
      handleAuthRole: function(row) {
        const userId = row.userId;
        this.$router.push("/system/user-auth/role/" + userId);
      },
      /** 提交按钮 */
      submitForm: function() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != undefined) {
              updateGoodsOrderIn(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              goodsOrderIn(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const id = row.id || this.ids;
        this.$modal.confirm('是否确认存货编码为"' + row.code + '"的数据项？').then(function() {
          return delGoodsOrderIn(id);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('system/user/export', {
          ...this.queryParams
        }, `user_${new Date().getTime()}.xlsx`)
      },
      /** 导入按钮操作 */
      handleImport() {
        this.upload.title = "用户导入";
        this.upload.open = true;
      },
      /** 下载模板操作 */
      importTemplate() {
        this.download('system/user/importTemplate', {}, `user_template_${new Date().getTime()}.xlsx`)
      },
      // 文件上传中处理
      handleFileUploadProgress(event, file, fileList) {
        this.upload.isUploading = true;
      },
      // 文件上传成功处理
      handleFileSuccess(response, file, fileList) {
        this.upload.open = false;
        this.upload.isUploading = false;
        this.$refs.upload.clearFiles();
        this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response
          .msg + "</div>", "导入结果", {
            dangerouslyUseHTMLString: true
          });
        this.getList();
      },
      // 提交上传文件
      submitFileForm() {
        this.$refs.upload.submit();
      }
    }
  };
</script>

<style lang="scss">
  .uploadDialog {
    .el-dialog {
      height: 40%;

      .el-dialog__body {
        .el-upload {
          width: 100%;
        }
      }
    }
  }
</style>
